.q-toast-container
  pointer-events none
  position fixed
  left 0
  right 0
  bottom 0
  z-index $z-toast
  will-change transform
  transform translateY(101%)
  transition transform .3s ease-in

  &.active
    transform translateY(0)

.q-toast
  pointer-events all
  padding 0 24px
  font-size .9rem

  > img, > i
    font-size 1.4rem
    vertical-align middle
    margin-right 24px
    max-height 30px
    max-width 30px
    border-radius 50%

  a
    padding 10px 0 10px 10px
    text-align center
    text-transform uppercase
    &:active
      color white
      text-shadow 0 0 5px white
    i
      font-size 1.3rem

.q-toast-message
  padding 20px 0

@media (min-width $breakpoint-md-min)
  .q-toast
    display inline-flex !important
    font-size 1.1rem
    border-radius $generic-border-radius
    max-width $breakpoint-md-min
    margin 24px auto 24px 24px
    box-shadow $shadow-6

    a
      i
        font-size 1.6rem
      &:first-of-type
        margin-left 30px

    > img, > i
      font-size 2rem
      margin-right 48px
